package myJs.download

import myJs.MainCp
import myJs.api.Api
import myJs.cps._
import myJs.cps.project.{BarCp, BoxplotCp, CellTypeCp, FeatureCp, FeaturePlotCp, GeneExpCp, MarkerCp, ScatterCp}
import myJs.myPkg.ReactRouterDOM
import myJs.myPkg.bootstrap.jquery.{AffixOptions, Offset, ScrollspyOptions}
import myJs.myPkg.jquery.$
import org.scalajs.dom.{document, window}
import slinky.core.{FunctionalComponent, TagElement}
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.SyntheticMouseEvent
import slinky.web.html._
import typings.csstype.csstypeStrings
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  case class Props(showLoading: Boolean = true, defaultAnchor: String = "1")

  val curPage = Download

  val component = FunctionalComponent[Props] { props =>

    object FTool {

      def scrollExec(anchorName: String) = {
        document.getElementById(anchorName).scrollIntoView()
      }

      def scrollToAnchor(anchorName: String) = (e: SyntheticMouseEvent[TagElement#RefType]) => {
        e.preventDefault()
        scrollExec(anchorName)
      }

    }

    useEffect(() => {
      $("body").scrollspy(ScrollspyOptions(target = "#myScrollspy", offset = 1))
      $("#myNav").affix(AffixOptions(offset = Offset(top = 50)))
    }, List()
    )

    useEffect(() => {
      FTool.scrollExec(props.defaultAnchor)
    }, List()
    )

    MainCp(title = curPage.titleStr)(

      div(className := "panel panel-default",
        div(className := "panel-heading",
          h3(className := "panel-title",
            s"${curPage.titleStr}"
          )
        ),
        div(className := "panel-body",

          div(style := Style(display = csstypeStrings.flex, maxWidth = 1108),
            div(style := Style(flex = 3, width = "30%"),
              div(id := "myScrollspy",
                div(className := "bs-docs-sidebar affix-top", role := "complementary",
                  ul(style := Style(width = 330), className := "nav bs-docs-sidenav", id := "myNav",
                    li(style := Style(width = 330), className := "",
                      a(href := s"#1", "1. Annotations", onClick := FTool.scrollToAnchor("1"))
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#2", "2. Expression Profiles and Metadata", onClick := FTool.scrollToAnchor("2"))
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#21", onClick := FTool.scrollToAnchor("21"),
                        span(style := Style(marginLeft = 20), "2.1. Human Bulk Tissue"),
                      )
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := s"#22", onClick := FTool.scrollToAnchor("22"),
                        span(style := Style(marginLeft = 20), "2.2. Mouse Bulk Tissue"),
                      )
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#23", onClick := FTool.scrollToAnchor("23"),
                        span(style := Style(marginLeft = 20), " 2.3. Human Single Cell")
                      )
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#24", onClick := FTool.scrollToAnchor("24"),
                        span(style := Style(marginLeft = 20), " 2.4. Human Cell Line"),
                      )
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#3", "3. Dependency Score", onClick := FTool.scrollToAnchor("3"))
                    ),
                    li(style := Style(width = 330), className := "",
                      a(href := "#4", "4. Survival Data", onClick := FTool.scrollToAnchor("4"))
                    ),
                  )
                ),
              )
            ),
            div(style := Style(flex = 7, paddingLeft = 15,
              position = csstypeStrings.relative, paddingRight = 15), id := "scrollContent",
              h4(style := Style(marginBottom = 15), "1. Annotations", id := "1"),
              AnnoTableCp(),
              h4(style := Style(marginBottom = 15, marginTop = 15), "2. Expression Profiles and Metadata", id := "2"),
              h5(style := Style(marginBottom = 15), "2.1. Human Bulk Tissue", id := "21"),
              HTableCp(),
              h5(style := Style(marginBottom = 15), "2.2. Mouse Bulk Tissue", id := "22"),
              MTableCp(),
              h5(style := Style(marginBottom = 15), "2.3. Human Single Cell", id := "23"),
              HSCp(),
              h5(style := Style(marginBottom = 15), "2.4. Human Cell Line", id := "24"),
              HCCp(),
              h4(style := Style(marginBottom = 15, marginTop = 15), "3. Dependency Score", id := "3"),
              {
                val url = s"${Api.apiUrl}/gepLiver/tool/downloadFile"
                a(href := s"${url}?fileName=Download/Dependency/CL_dep.txt","CL_dep.txt")
              },
              h4(style := Style(marginBottom = 15, marginTop = 15), "4. Survival Data", id := "4"),
              SCp()
            )

          )

        )
      )

    )

  }

  object STool {

    val myBtn = Style(cursor = csstypeStrings.pointer,
      marginBottom = 10, paddingTop = 3, paddingBottom = 3, marginRight = 15
    )

  }

}
